<template>
	<view>

		<view class="grid" :class="active?'active':''" @click="onclick()">
			<image class="img" :src="item.imageUrl"></image>
			<view>
				<view>{{item.name}}</view>
				<view class="flex">
					<u-row>
						<u-col span="8">
							{{$t("price")}}:
						</u-col>
						<u-col span="8">
							<u--text :block="true" mode="price" :text="item.totalAmount"></u--text>
						</u-col>
					</u-row>

				</view>
				<u--text type="info" :text="item.remark"></u--text>
			</view>
			<view class="count">
				<view>{{item.quantity}}</view>
				<view>{{$t("count")}} </view>
			</view>
		</view>
<view class="dteail" v-if="active">
	   <u-row v-for="(item,index) in item.details"   customStyle="margin-bottom: 10px;padding:10px">
	                    <u-col span="6">
	                        <view class="detailname">{{item.name}}</view>
	                    </u-col>
	                    <u-col span="3">
	                          <view class="detailcount">{{item.paymentAmount/item.quantity}}¥/{{item.quantity}}</view>
	                    </u-col>
	                    <u-col span="3">
	                      <view class="detailprice"> <u--text :block="true" mode="price"  :text="item.paymentAmount"></u--text></view>
	                    </u-col>
	                </u-row>
					</view>
	</view>

</template>

<script>
	export default {
		props: {
			item: {
				default: {}
			},
			active: {
				default: false
			}
		},
		methods: {
			onclick: function() {
				this.$emit("onSelected", this.item)
			}
		}
	}
</script>

<style>
	.grid {
		display: grid;
		grid-template-columns: 80px 1fr 50px;
		gap: 10px;
		padding: 10px;

		column-gap: 10px;
		background-color: #fff;
		margin-bottom: 1px;
		margin-top: 5px;
	}

	.img {
		background-color: #eee;
		width: 80px;
		height: 80px;
		border-radius: 6px;
	}

	.flex {
		display: flex;
	}

	.active {
		background-color: #4c77ee !important;
		color: #fff !important;
	}

	.count {
		text-align: center;
	
		font-weight: bold;
		color: palegoldenrod;
		align-items: center;
	}
	.dteail{
		background-color: #fff;
	}
</style>
